import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    TouchableHighlight
} from 'react-native';

import Swiper from 'react-native-swiper';

//引入跳转路由组件
import { Actions } from 'react-native-router-flux'

const styles = StyleSheet.create({
    slide1: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#9DD6EB',
    },
    slide2: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#97CAE5',
    },
    slide3: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#92BBD9',
    },
    text: {
        color: '#fff',
        fontSize: 30,
        fontWeight: 'bold',
    },
    box: {
        width: '33.3%',
        alignItems: 'center',
        marginTop: 20
    }
})

export default class Home extends Component {
    constructor(props) {
        super(props)
        this.state = {
            lunbotu: []
        }
    }
    componentWillMount() {
        fetch('https://api.asilu.com/bg/')
            .then(res => res.json())
            .then(data => {
                this.setState({
                    lunbotu: data.images
                })
            })

    }
    render() {
        return <View>

            <View style={{ height: 220 }}>
                <Swiper style={styles.wrapper} showsButtons={true} autoplay={true}>
                    <View style={styles.slide1}>
                        <Image source={{ uri: 'https://cn.bing.com/th?id=OHR.MiquelonPanorama_ZH-CN3614818937_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp' }} style={{ height: '100%', width: '100%' }} />
                    </View>
                    <View style={styles.slide2}>
                        <Image source={{ uri: 'https://cn.bing.com/th?id=OHR.GodsGarden_ZH-CN3317703606_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp' }} style={{ height: '100%', width: '100%' }} />
                    </View>
                    <View style={styles.slide3}>
                        <Image source={{ uri: 'https://cn.bing.com/th?id=OHR.LeatherbackTT_ZH-CN5495532728_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp' }} style={{ height: '100%', width: '100%' }} />
                    </View>
                </Swiper>
            </View >
            <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
                <View style={styles.box}>
                    <Image style={{ height: 40, width: 40 }} source={require('../images/menu1.png')} />
                    <Text style={{ fontSize: 10 }}>新闻资讯</Text>
                </View>
                <View style={styles.box}>
                    <Image style={{ height: 40, width: 40 }} source={require('../images/menu2.png')} />
                    <Text style={{ fontSize: 10 }}>图片分析</Text>
                </View>
                <View style={styles.box} >
                    <Image style={{ height: 40, width: 40 }} source={require('../images/menu3.png')} />
                    <Text style={{ fontSize: 10 }}>商品购买</Text>
                </View>
                <View style={styles.box}>
                    <Image style={{ height: 40, width: 40 }} source={require('../images/menu4.png')} />
                    <Text style={{ fontSize: 10 }}>视频专区</Text>
                </View>

                <TouchableHighlight onPress={this.goMovieList} underlayColor="white" style={styles.box}>
                    <View>
                        <Image style={{ height: 40, width: 40 }} source={require('../images/menu5.png')} />
                        <Text style={{ fontSize: 10 }}>热映电影</Text>
                    </View>
                </TouchableHighlight>

                <View style={styles.box}>
                    <Image style={{ height: 40, width: 40 }} source={require('../images/menu6.png')} />
                    <Text style={{ fontSize: 10 }}>练习</Text>
                </View>
            </View>
        </View>
    }
    goMovieList = function () {
        //跳转到指定的路由，如果需要传参，直接在()中以对象的方式进行传递({id:10})
        Actions.movieList()
    }
}